<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="./jquery-2.1.4/jquery.js"></script>
    <title>Title</title>
    <script>
        $(documment).ready(function(){

        })
        $(function () {

        })
    </script>
</head>
<body>
<!--- JQuery简称。地位非常高，在前端中相当于java中的Spring框架，作用也类似。
 jq是js函数库。简化了js的大量操作，比如DOM $('元素id')==js中的document.getElemetnByID()
 jq是为了跨浏览器（ie，firefox，chrome，safari内核）和浏览器版本。（IE6-/6+/10+/11+/EDGE）-->

<input id="txt1" name="text1" type="text" value="我是测试文本"><br>
<input type="button" id="btn1" value="点我" onclick="clickme"><br>
<input type="button" id="btn2" value="操作div" onclick="clickme2()">
<div id="div1" style="background-color: aqua;width: 200px;height: 100px"></div>
<div id="div2" style="background-color:#dd11ff;width: 200px;height: 100px"></div>
<script type="text/javascript">
    // jq通过选取html元素，并对元素进行操作
    //基础语法：  $(selector).action()  selector通过特点属性来找元素
    // 在函数中，可以使用this关键字来表示元素
    //$(this).hide()  当前元素隐藏
    //$("p").hide()  隐藏所有的段落内容 $("元素类型")==document.getElemetnsByTagName()
    //$("p .test").hide()  隐藏所有的class=test的段落
    //$("#test").hide()  隐藏所有的id=test的元素
    //选择器语法 . # -> Xpath

    //html准备就绪方法（打开网页之前的一瞬间）
    //小括号里面一般跟着参数列表。jq的小括号里可以跟方法体（lamba表达式 兰布达）
    //事件->你的操作对应的网页元素的方法
    //常见的事件：单击(按钮onclick)click,双击dblclick,获取焦点onfoucs，失去焦点onblur
    
    function clickme() {
        $("#txt1").dblclick();
        alert("w我被点了");
    }

    $("#txt1").dblclick(function(){ //找到id=txt1的元素，对它的双击事件进行定义。
        $(this).hide(); //this表示元素本身
    })
    $("#txt1").mouseenter(function(){//鼠标指针穿过元素的事件。
     //   $(this).hide();//this表示元素本身
        console.log("你瞅啥")
    })
    $("#txt1").mouseleave(function(){//鼠标指针离开元素的事件（必须先穿过才能处罚）。
        console.log("瞅你咋滴")
    })
    $("#txt1").mousedown(function(){//鼠标指针进入元素（让元素获取焦点），并且发生单击的事件。
        console.log("啪！")
    })
    $("#txt1").focus(function(){//获取焦点
        console.log("瞅你咋滴！！！！！")
    })
    $("#txt1").blur(function () {//失去焦点。（其他地方获取了焦点）
        console.log("我滚了!!!!!");
        if(this.value.length>=4){
            $(this).css("color","#fff1a2");
            console.log( $(this).html());
        }
    })
</script>
    <script>
//    alert("我将带头冲锋！");
    $(function () {
//    $("#btn1").click();

    })
</script>


</body>
</html>